<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山东旅游网</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <div class="logo">山东旅游网</div>
        <nav>
            <ul>
                <li><a href="customer.jsp">首页</a></li>
                <li><a href="beautifulshandong.jsp">魅力山东</a></li>
                <li><a href="infomation.jsp">资讯</a></li>
                <li><a href="scenicspots.jsp">景点</a></li>
                <li><a href="ticketpurchase.jsp">购票</a></li>
            </ul>
        </nav>
        
	    <nav class="user-actions">
            <ul>
            	<li><a href="#">${userInfo.username}[${userInfo.memberLevel}]</a></li> 
                <li><a href="userinfo.jsp">个人信息</a></li>
                <li><a href="SalesRecordServlet?userID=${userInfo.userID}&usermemberLevel=${userInfo.memberLevel}">消费记录</a></li>
                <li><a href="#">留言与回复</a></li>
                <li><a href="index.jsp">退出</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <div class="slider-wrapper">
            <div class="slider-container">
                <div class="slider-main" id="slider">
                    <div><img src="./images/LunBoTu_1.jpg" ></div>
                    <div><img src="./images/LunBoTu_2.jpg" ></div>
                    <div><img src="./images/LunBoTu_3.jpg" ></div>
                </div>     
            </div>
        </div>

        <section class="hot-spots">
            <h2>热门景点</h2>
            <ul class="hot-spots-list">
                <li>
                    <img src="./images/LunBoTu_1.jpg">
                    <h3>泰山</h3>
                    <p>五岳之首，有深厚的历史文化底蕴，山势雄伟壮观。</p>
                    <a href="#">查看详情</a>
                </li>
                <li>
                    <img src="./images/LunBoTu_2.jpg">
                    <h3>崂山</h3>
                    <p>山海相连，景观奇特，兼具道教文化与秀丽自然风光。</p>
                    <a href="#">查看详情</a>
                </li>
                <li>
                    <img src="./images/LunBoTu_3.jpg" >
                    <h3>蓬莱阁</h3>
                    <p>建筑风格独特，周边海景壮美，充满神话色彩。</p>
                    <a href="#">查看详情</a>
                </li>
            </ul>
            <button type="button" class="see-more-btn">查看更多</button>
        </section>

        <section class="latest-news">
            <h2>最新资讯</h2>
            <ul class="news-list">
                <li>
                    <div class="news-content">
                        <span class="rectangle"></span>
                        <a href="#"><span class="news-file">山东旅游攻略.pdf</span></a>
                    </div>
                    <span class="news-date">2024-11-20</span>
                </li>
                <li>
                    <div class="news-content">
                        <span class="rectangle"></span>
                        <a href="#"><span class="news-file">济南美食地图.jpg</span></a>
                    </div>
                    <span class="news-date">2024-11-15</span>
                </li>
                <li>
                    <div class="news-content">
                        <span class="rectangle"></span>
                        <a href="#"><span class="news-file">大明湖景点介绍.docx</span></a>
                    </div>
                    <span class="news-date">2024-11-10</span>
                </li>
            </ul>
            <button type="button" class="see-more-news-btn">查看更多资讯</button>
        </section>
    </main>
    
    <footer>
        <div class="footer-container">
            <div class="footer-left">
                <div class="footer-text">
                    <p>
                        <span>Copyright © 2024</span>
                        <span>山东建筑大学</span>
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</body>

<style>
   
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
    }

    header {
        background-color: white;
        display: flex;
        justify-content: space-between;
        height: 60px;
        align-items: center;
        padding: 10px 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .logo {
        color: orange;
        font-size: 24px;
        font-weight: bold;
    }

    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    nav ul li {
        margin-left: 20px;
    }

    nav ul li a {
        text-decoration: none;
        color: gray;
    }

    nav ul li a:hover {
        color: black;
    }

    main {
        flex: 1;
        text-align: center;
    }

    .slider-wrapper {
        width: 1400px;
        margin: 0 auto;
    }

  
    .slider-container {
        margin-top: 20px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .slider-main {
        display: flex;
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .slider-main img {
        width: 100%;
        height: 300px;
        flex-shrink: 0;
    }

    .hot-spots {
        margin-top: 30px;
        text-align: left;
        width: 1200px;
        margin: 0 auto;
        text-align: center;
    }

    .hot-spots h2 {
        color: orange;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .hot-spots-list {
        list-style-type: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .hot-spots-list li {
        width: 30%;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        overflow: hidden;
    }

    .hot-spots-list li img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .hot-spots-list li img:hover {
        transform: scale(1.1);
    }

    .hot-spots-list li h3 {
        font-size: 16px;
        margin: 10px;
        color: gray;
    }

    .hot-spots-list li p {
        font-size: 14px;
        margin: 0 10px 10px 10px;
        color: #777;
    }

    .hot-spots-list li a {
        display: block;
        text-align: center;
        background-color: green;
        color: white;
        padding: 5px 10px;
        margin: 0 10px 10px 10px;
        text-decoration: none;
        border-radius: 4px;
    }

    .hot-spots-list li a:hover {
        background-color: #008000;
    }

    .hot-spots.see-more-btn {
        display: block;
        margin: 20px auto;
        background-color: green;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4  4px;
    }

    .hot-spots.see-more-btn:hover {
        background-color: #008000;
    }

    .latest-news {
        margin-top: 30px;
        width: 1200px;
        margin: 0 auto;
    }

    .latest-news h2 {
        color: orange;
        font-size: 24px;
        margin-bottom: 20px;
    }

    .news-list {
        list-style-type: none;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .rectangle {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: gray;
            margin-right: 5px;
        }
    .news-list li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        border-bottom: 1px solid #e0e0e0;
    }

    .news-file {
        color: #333;
        font-size: 16px;
    }

    .news-date {
        color:  999;
        font-size: 14px;
    }

    .latest-news.see-more-news-btn {
        display: block;
        margin: 20px auto;
        background-color: green;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
    }

    .latest-news.see-more-news-btn:hover {
        background-color: #008000;
    }

    footer {
        background-color: green;
        color: white;
        padding: 15px 0;
        width: 100%;
        height: 40px;
        margin-top:10px;
    }

    .footer-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .footer-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-text {
        text-align: center;
    }
    
</style>
<script>
    $(document).ready(function () {
        $('#slider').slick({
            autoplay: true,
            autoplaySpeed: 2000,
            dots: false,
            arrows: false
        });

    });
</script>


</html>